Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[🔥AUDIT🔥] Storybook: Add remark-gfm plugin to add GFM MDX support #2451

Merged
merged 1 commit into from
Jan 31, 2025
Merged

[🔥AUDIT🔥] Storybook: Add remark-gfm plugin to add GFM MDX support #2451

merged 1 commit into from
Jan 31, 2025

Conversation

jandrade
Copy link
Member

@jandrade jandrade commented Jan 31, 2025 •
edited
Loading

🖍 This is an audit! 🖍

Summary:

After the Storybook v8 upgrade, we lost the ability to use GFM in MDX files.
This PR adds the remark-gfm plugin to the MDX loader to re-enable GFM support.

For more context, GFM (GitHub Flavored Markdown) is a superset of the original
Markdown specification that adds additional features like tables, task lists,
and strikethrough text.

https://storybook.js.org/docs/writing-docs/mdx#markdown-tables-arent-rendering-correctly

Issue: WB-XXXX

Test plan:

Navigate to any docs page that renders markdown tables and verify that they are
rendered correctly.

/?path=/docs/packages-clickable-clickable-accessibility--docs

BEFORE | AFTER
Screenshot 2025-01-31 at 3 44 47 PM

@jandrade jandrade self-assigned this Jan 31, 2025
@jandrade jandrade added the audit PR is using the audit OLC flow label Jan 31, 2025
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Jan 31, 2025

⚠️ No Changeset found

Latest commit: 0ba7553

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@khan-actions-bot khan-actions-bot requested a review from a team January 31, 2025 20:44
@khan-actions-bot
Copy link
Contributor

Gerald

Required Reviewers
  • @Khan/wonder-blocks for changes to package.json, yarn.lock, .storybook/main.ts

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

@github-actions GitHub Actions
Copy link
Contributor

npm Snapshot: NOT Published

🤕 Oh noes!! We couldn't find any changesets in this PR (2becff0). As a result, we did not publish an npm snapshot for you.

@github-actions GitHub Actions
Copy link
Contributor

Size Change: 0 B

Total Size: 98.2 kB

ℹ️ View Unchanged
Filename Size
packages/wonder-blocks-accordion/dist/es/index.js 3.77 kB
packages/wonder-blocks-banner/dist/es/index.js 1.53 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.77 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js 887 B
packages/wonder-blocks-button/dist/es/index.js 4.31 kB
packages/wonder-blocks-cell/dist/es/index.js 2.01 kB
packages/wonder-blocks-clickable/dist/es/index.js 3.06 kB
packages/wonder-blocks-core/dist/es/index.js 2.9 kB
packages/wonder-blocks-data/dist/es/index.js 6.24 kB
packages/wonder-blocks-dropdown/dist/es/index.js 18.9 kB
packages/wonder-blocks-form/dist/es/index.js 5.99 kB
packages/wonder-blocks-grid/dist/es/index.js 1.36 kB
packages/wonder-blocks-icon-button/dist/es/index.js 2.95 kB
packages/wonder-blocks-icon/dist/es/index.js 871 B
packages/wonder-blocks-labeled-field/dist/es/index.js 1.84 kB
packages/wonder-blocks-layout/dist/es/index.js 1.82 kB
packages/wonder-blocks-link/dist/es/index.js 2.28 kB
packages/wonder-blocks-modal/dist/es/index.js 5.42 kB
packages/wonder-blocks-pill/dist/es/index.js 1.65 kB
packages/wonder-blocks-popover/dist/es/index.js 4.85 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.52 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.34 kB
packages/wonder-blocks-switch/dist/es/index.js 1.92 kB
packages/wonder-blocks-testing-core/dist/es/index.js 3.74 kB
packages/wonder-blocks-testing/dist/es/index.js 1.07 kB
packages/wonder-blocks-theming/dist/es/index.js 693 B
packages/wonder-blocks-timing/dist/es/index.js 1.8 kB
packages/wonder-blocks-tokens/dist/es/index.js 2.54 kB
packages/wonder-blocks-toolbar/dist/es/index.js 905 B
packages/wonder-blocks-tooltip/dist/es/index.js 6.99 kB
packages/wonder-blocks-typography/dist/es/index.js 1.23 kB

compressed-size-action

@github-actions GitHub Actions
Copy link
Contributor

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-rscxtgmwsv.chromatic.com/

Chromatic results:

Metric Total
Captured snapshots 54
Tests with visual changes 0
Total stories 530
Inherited (not captured) snapshots [TurboSnap] 0
Tests on the build 380

@jandrade
Copy link
Member Author

Here is how it looks like in the PR Storybook site: https://5e1bf4b385e3fb0020b7073c-rscxtgmwsv.chromatic.com/?path=/docs/packages-clickable-clickable-accessibility--docs

@jandrade jandrade merged commit 8813dde into main Jan 31, 2025
16 of 24 checks passed
@jandrade jandrade deleted the sb-remark-gfm branch January 31, 2025 20:57
@codecov Codecov
Copy link

codecov bot commented Jan 31, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 0.00%. Comparing base (cbf9c34) to head (0ba7553).
Report is 1 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@     Coverage Diff      @@
##   main   #2451   +/-   ##
============================
============================

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update cbf9c34...0ba7553. Read the comment docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@jandrade jandrade

Labels
audit PR is using the audit OLC flow
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@jandrade @khan-actions-bot